<template>
	<view class="all">
		<uni-nav-bar :fixed="true" :statusBar="true">
			<template slot="left">
				<view class="addres" @tap="toCity">{{cityIndex}}
					<image src="../../static/first/down.png"></image>
				</view>
			</template>
			<view class="jiangqie-btn-search" @tap="toSearch()">
				<uni-icons class="input-uni-icon" type="search" size="18" color="#cccccc" />
				<text>搜索服务项目</text>
			</view>
		</uni-nav-bar>
		<!-- 选项卡 -->
		<wuc-tab :tab-list="typeList" :tabCur.sync="TabCur4" tab-class="text-center text-white bg-blue"
			select-class="text-white" @change="typeListChange"></wuc-tab>
		<section class="Index-Page">
			<s-tabs :effect="false" v-model="activeTab" @change="change" :nav-per-view="2">
				<s-tab :title="tab" v-for="(tab,index) in tableList" :key='index' @change="change(tab)" class="change">
				</s-tab>
			</s-tabs>
		</section>
		<view :current="TabCur4" class="swiper row">
			<view class="swiper_item">
				<view class="all_company">
					<view class="company_box" v-for="(item,index) in serviceList" :key="index" @click="toDetail(item)">
						<image :src="item.coverImg[0]" class="img"></image>
						<view class="company_name">
							<text class="cu" v-if="item.activityFlag == 1">促</text>
							{{item.title}}
						</view>
						<view class="price">
							<text class="pri">￥{{item.price}}</text>
							<text class="zixun">{{item.advisoryNumber}}人咨询</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
	</view>
</template>

<script>
	import utils from '../../common/utils.js'
	import WucTab from '@/components/wuc-tab/wuc-tab.vue';
	import sTabs from '@/s-ui/s-tabs';
	import sTab from '@/s-ui/s-tab';
	export default {
		components: {
			sTabs,
			sTab,
			WucTab
		},
		data() {
			return {
				TabCur4: 0,
				afterHeaderOpacity: 1, //不透明度
				headerPosition: 'fixed',
				headerTop: '0rpx',
				statusTop: '40rpx',
				activeTab: 0,
				TabCur: 0,
				tableList: ['浏览量', '咨询量'],
				typeList: [], //服务分类
				serviceList: [], //服务列表
				typeName: '',
				cityIndex: '',
				pageNo: 1,
				advisoryNumber: null,
				browseNumber: null,
				loadMoreText: '加载中',
				showLoadMore: false,
			}
		},
		onLoad() {
			let that = this
			that.getServiceTypeList()
		},
		onShow() {
			let that = this
			if (getApp().globalData.city != '' || getApp().globalData.city != this.cityIndex) {
				that.pageNo = 1
				that.serviceList = []
				this.cityIndex = getApp().globalData.city
				setTimeout(function() {
					that.getServiceByType(null, null, that.typeName)
				}, 300)
			}
		},
		onReachBottom() {
			this.showLoadMore = true;
			setTimeout(() => {
				this.getServiceByType(this.browseNumber, this.advisoryNumber, this.typeName);
			}, 300);
		},
		methods: {
			// 定位城市
			toCity() {
				uni.navigateTo({
					url: "/pages/home/city"
				})
			},
			//获取城市列表
			getCityList() {
				uni.request({
					url: this.$serverUrl + '../dictDetail/map',
					data: {
						"dictName": 'company_city'
					},
					success: (res) => {
						this.cityIndex = res.data.company_city[0].value
					}
				})
			},
			//服务分类
			getServiceTypeList(index) {
				uni.request({
					url: this.$serverUrl + 'ftServiceType',
					data: {
						"page": 0,
						"size": 50
					},
					success: (res) => {
						let arr = []
						for (let i = 0; i < res.data.content.length; i++) {
							let obj = {}
							obj.name = res.data.content[i].name
							arr.push(obj)
						}
						this.typeList = arr
						this.typeName = this.typeList[this.TabCur4].name
					}
				})
			},
			//获取分类下的服务
			getServiceByType(browseNumber, advisoryNumber, type) {
				uni.request({
					url: this.$serverUrl + 'ftService/getPutShelfServicesByType',
					method: 'POST',
					data: {
						"pageNo": this.pageNo,
						"pageSize": 4,
						"browseNumber": browseNumber,
						"advisoryNumber": advisoryNumber,
						"serviceCity": this.cityIndex,
						"type": type
					},
					success: (res) => {
						let data = res.data
						if (data.length == 0) {
							this.loadMoreText = '没有更多了'
						} else {
							this.pageNo += 1
							this.serviceList = this.serviceList.concat(data)
						}
					}
				})
			},
			//跳转详情
			toDetail(item) {
				let that = this
				let userInfo = uni.getStorageSync('userInfo')
				if (userInfo != '') {
					uni.request({
						url: that.$serverUrl + 'ftService/addServiceBrowseNumber/' + item.id,
						success: (res) => {

						}
					})
					uni.navigateTo({
						url: '/pages/serve/serviceDetail?op=' + encodeURIComponent(JSON.stringify(item))
					})
				} else {
					uni.getUserProfile({
						desc: 'wexin',
						success: (e) => {
							utils.loginRequest(e.userInfo).then((res) => {
								if (res.success) {
									if (uni.getStorageSync('userInfo') != '') {
										uni.showToast({
											title: '登录成功',
											icon: 'none'
										})
										uni.request({
											url: that.$serverUrl +
												'ftService/addServiceBrowseNumber/' + item.id,
											success: (res) => {

											}
										})
										uni.navigateTo({
											url: '/pages/serve/serviceDetail?op=' +
												encodeURIComponent(JSON.stringify(item))
										})
									}
								}
							})
						}
					})
				}
			},
			//选择分类
			typeListChange(e) {
				this.serviceList = []
				this.pageNo = 1
				this.typeName = this.typeList[e].name
				this.typeName = this.typeList[e].name
				this.getServiceByType(null, null, this.typeList[e].name)
			},
			//类型选择
			change(tab) {
				if (tab == 1) {
					//咨询量排序
					this.advisoryNumber = 'flag'
					this.browseNumber = null
					this.serviceList = []
					this.pageNo = 1
					this.getServiceByType(this.browseNumber, this.advisoryNumber, this.typeName)
					this.advisoryNumber = null
				} else {
					//浏览量排序
					this.browseNumber = 'flag'
					this.advisoryNumber = null
					this.serviceList = []
					this.pageNo = 1
					this.getServiceByType(this.browseNumber, this.advisoryNumber, this.typeName)
					this.browseNumber = null
				}

			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f2f5;
	}

	.uni-loadmore {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		padding-bottom: 30rpx;
	}

	/* 搜索框 */
	.jiangqie-btn-search {
		display: flex;
		align-items: center;
		width: 80%;
		height: 32px;
		padding-left: 20rpx;
		background: #F5F5F5;
		border-radius: 16px;
		color: #CCCCCC;
		font-size: 24rpx;
	}


	.all {
		background-color: #f0f2f5;
	}

	.addres {
		display: flex;
		align-items: center;
		margin-left: 30rpx;
		font-size: 24upx;
	}

	.addres image {
		width: 20upx;
		height: 20upx;
	}

	.mp-header {
		width: 92%;
		padding: 0 4%;
		height: 100upx;
		display: flex;
		align-items: flex-end;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #f0f2f5;
	}

	.input-box {
		/* width: 100%; */
		margin-left: 40upx;
		height: 60upx;
		background-color: #f5f5f5;
		border-radius: 30upx;
		position: relative;
		display: flex;
		align-items: center;
	}

	.search image {
		height: 30upx;
		width: 30upx;
	}

	.input-box input {
		margin-left: 20upx;
	}

	/* 选项卡 */
	swiper {
		// box-sizing: border-box;
	}

	div,
	scroll-view,
	swiper {
		box-sizing: border-box;
	}

	div {
		font-size: 28upx;
		color: #3B4144;
	}

	.Index-Page {
		background-color: #FFFFFF;
	}

	.all_company {
		/* background-color: #F0AD4E; */
		margin: 40upx 36upx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

	}

	.company_box {
		width: 330upx;
		margin: 20upx 0;
	}

	.img {
		width: 330upx;
		height: 330upx;
		border-radius: 10upx;
	}

	.cu {
		width: 50upx;
		height: 50upx;
		background-color: #f87935;
		color: #FFFFFF;
		text-align: center;
		line-height: 50upx;
		border-radius: 5upx;
		margin-right: 15upx;
		padding: 5upx;
	}

	.company_name {
		margin-top: 20upx;
		letter-spacing: 3upx;
	}

	.price {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 40upx;
	}

	.pri {
		color: #e04141;
		font-size: 34upx;
		font-weight: bold;
	}

	.zixun {
		color: #666666;
		font-size: 24upx;
	}
</style>
